<template>
	<el-table :data="data" v-bind="$attrs" row-key="id" stripe style="width: 100%" v-loading="loading" @selection-change="onSelectionChange">
		<slot></slot>
		<template #empty>
			<el-empty description="暂无数据" />
		</template>
	</el-table>
	<div class="table-footer mt15">
		<el-pagination
			v-model:current-page="state.page.pageNum"
			v-model:page-size="state.page.pageSize"
			:pager-count="5"
			:page-sizes="[10, 20, 30]"
			:total="total"
			layout="total, sizes, prev, pager, next, jumper"
			background
			@size-change="onHandleSizeChange"
			@current-change="onHandleCurrentChange"
		>
		</el-pagination>
	</div>
</template>

<script setup lang="ts" name="netxTable">
import { reactive } from 'vue';
import '/@/theme/tableTool.scss';

// 定义父组件传过来的值
const props = defineProps({
	// 列表内容
	data: {
		type: Array,
		default: () => [],
	},
	// 总数
	total: {
		type: Number,
		default: () => 0,
	},
	// 表格加载
	loading: {
		type: Boolean,
		default: () => true,
	},
});

// 定义子组件向父组件传值/事件
const emit = defineEmits(['pageChange', 'onSelectionChange']);

const state = reactive({
	page: {
		pageNum: 1,
		pageSize: 10,
	},
});

// 分页改变
const onHandleSizeChange = (val: number) => {
	state.page.pageNum = 1;
	state.page.pageSize = val;
	emit('pageChange', state.page);
};
// 分页改变
const onHandleCurrentChange = (val: number) => {
	state.page.pageNum = val;
	emit('pageChange', state.page);
};
// 搜索时，分页还原成默认
const pageReset = () => {
	state.page.pageNum = 1;
	state.page.pageSize = 10;
	emit('pageChange', state.page);
};
// 表格多选改变时，用于导出
const onSelectionChange = (val: any) => {
	emit('onSelectionChange', val);
};

// 暴露变量
defineExpose({
	pageReset,
});
</script>

<style scoped lang="scss">
.el-table {
	height: 100%;
}
.table-footer {
	display: flex;
	justify-content: center;
}
</style>
